<template>
	<view class="uploadBox">
		<template v-if="uploadType == 'image'">
			<view class="imgItem" :style="{width:imgWidth, height:imgHeight}" v-for="(item,index) in defaultList" :key="index" @click="previewImg(item)">
				<image :src="item" mode="aspectFill" class="img"></image>
				<image :src="require('../uploadOssBox/static/close.png')" mode="" class="close" @click.stop="deleteImg(index)"></image>
			</view>	
			<view class="imgItem" :style="{width:imgWidth, height:imgHeight}" @click="chooseImage" v-if="defaultList.length < maxCount">
				<image :src="uploadImg ? uploadImg : require('../uploadOssBox/static/default.png')" mode="" class="img"></image>
			</view>	
		</template>
		<template v-if="uploadType == 'file'">
			<view class="fileItem" v-for="(item,index) in defaultList" :key="index" @click="previewFile(item)">
				<view class="">
					{{item}}
				</view>
				<image :src="require('../uploadOssBox/static/delete.png')" mode="widthFix" @click.stop="deleteImg(index)"></image>	
			</view>	
			<view class="fileBtn" @click="chooseImage" v-if="defaultList.length < maxCount" :style="{background:bgColor}">
				<image :src="require('../uploadOssBox/static/fileUp.png')" mode="widthFix"></image>
				上传文件
			</view>		
		</template>
	</view>
</template>

<script>
	import uploadFile from '../uploadOssBox/js/uploadFile.js'
	export default{
		props:{
			maxCount:{
				type:Number,
				default:9
			},
			imgWidth:{
				type:String,
				default:'150rpx'
			},
			imgHeight:{
				type:String,
				default:'150rpx'
			},
			fileList:{
				type:Array,
				default:() => {
					return []
				}
			},
			sourceType:{
				type:Array,
				default:() => {
					return ['camera','album']
				}
			},
			uploadImg:{
				type:String,
				default: null
			},
			uploadType:{
				type:String,
				default:'image'
			},
			bgColor:{
				type:String,
				default:'#1aaba8'
			}
		},
		data(){
			return{
				defaultList:[]
			}
		},
		watch:{
			fileList:{
				handler:function(newVal,oldVal){
					// console.log(newVal)
					if(newVal && newVal.length > 0){
						this.defaultList = newVal
					}
				},
				deep:true,
				immediate:true
			}
		},
		methods:{
			chooseImage(){
				if(this.uploadType == 'image'){
					uni.chooseImage({
						count:Number(this.maxCount) - this.defaultList.length,
						sourceType:this.sourceType,
						success: (res) => {
							// console.log(res)
							let paths = res.tempFilePaths
							paths.forEach(url => {
								uploadFile(url, (uploadRes) =>{
									this.defaultList.push(uploadRes)
									this.$emit('changeUpload', this.defaultList)
								}, (err) => {
									console.log(err)
								})
							})
						}
					})
				}
				if(this.uploadType == 'file'){
					// #ifdef MP-WEIXIN
					uni.chooseMessageFile({
						count:Number(this.maxCount) - this.defaultList.length,
						type:'',
						success:(res) => {
							let paths = res.tempFilePaths
							paths.forEach(url => {
								uploadFile(url, (uploadRes) =>{
									this.defaultList.push(uploadRes)
									this.$emit('changeUpload', this.defaultList)
								}, (err) => {
									console.log(err)
								})
							})
						}
					})
					// #endif
					// #ifdef H5
					uni.chooseFile({
						count:Number(this.maxCount) - this.defaultList.length,
						type:'all',
						success:(res) => {
							let paths = res.tempFilePaths
							paths.forEach(url => {
								uploadFile(url, (uploadRes) =>{
									this.defaultList.push(uploadRes)
									this.$emit('changeUpload', this.defaultList)
								}, (err) => {
									console.log(err)
								})
							})
						},
						fail:(err) => {
							console.log(err)
						}
					})
					// #endif
				}
			},
			deleteImg(index){
				this.defaultList.splice(index, 1)
				this.$emit('changeUpload', this.defaultList)
			},
			previewImg(url){
				uni.previewImage({
					urls:[url]
				})
			},
			previewFile(url){
				uni.downloadFile({
					url:url,
					success: (res) => {
						let path = res.tempFilePath
						uni.openDocument({
							filePath:path
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.uploadBox{
		width: 100%;
		display: flex;
		align-items: center;	
		flex-wrap: wrap;
		box-sizing: border-box;
	}
	.imgItem{
		position: relative;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		.img{
			width: 100%;
			height: 100%;
		}
		.close{
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			top: -10rpx;
			right: -10rpx;
			z-index: 9999;
		}
	}
	.img{
		width: 100%;
		height: 100%;
	}
	.fileItem{
		width: 100%;
		font-size: 28rpx;
		padding:10rpx 0;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		view{
			word-break: break-all;
			width: 85%;
		}
		image{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.fileBtn{
		width: 100%;
		// border: solid 2rpx #666;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #fff;
		image{
			width: 60rpx;
			margin-right: 10rpx;
		}
	}
</style>